<html>
<title>Page Merge</title>
<head>
<link rel="stylesheet" type="text/css" href="result.css">
<script src="jquery-1.11.1.min.js"></script> 
<style>
</style>
</head>
<body>
	<div id="noInfo" class="noInfo"></div>

	<div class="canvas" id="canvas"></div>

	<div>
	<table border="0" width="100%">	
		<tr>
			<td>
				<div class="left_panel" id="leftPanel">

				</div>
				
				<div class="midle_panel" id="midlePanel">
					<div class="btn" id="btnLeft">&larr;</div>			
					<div class="btn" id="btnRight">&rarr;</div>
					<div class="btn" id="btnTwo">&harr;</div>
					<div class="btn" id="btnHelp">?</div>					
					<div class="btn" id="btnSHowHide">Dock</div>
				</div>
				
				<div class="right_panel" id="rightPanel">

				</div>
			</td>
		<tr>
	</table>	
	</div>	
	
	<div id="help" class="help">
		<table border="0" width="100%" cellpadding="0" cellspacing="0">
			<tr>
				<td>
					<div id="helpTitle" class="help_title"><b>Instruction</b></div>
				</td>
			</tr>	
		</table>
		
		<div id="helpContent" class="help_content">
			<table border="0" width="100%" cellpadding="0" cellspacing="0">	
				<tr>
					<td><div class="btn2">&larr;</div></td>
					<td>Let the right page occupy more space of the screen</td>
				<tr>	
				<tr>
					<td><div class="btn2">&rarr;</div></td>
					<td>Let the left page occupy more space of the screen</td>
				<tr>
				<tr>
					<td><div class="btn2">&harr;</div></td>
					<td>Show two pages equally</td>
				<tr>	
				<tr>
					<td><div class="btn2">?</div></td>
					<td>Help</td>
				<tr>
				<tr>
					<td><div class="btn2">Dock</div></td>
					<td>Hide/Show the dock</td>
				<tr>
			</table>
		</div>

		<div class="helpClose" id="helpClose">Close</div>
	</div>	
	
	<script type="text/javascript" src="result.js"></script>
</body>
</html>